import React, {Component} from 'react'
import {Redirect} from 'react-router-dom'
import {
    Form,
    Input,
    Button,
    message
} from 'antd'
import {
    UserOutlined,
    LockOutlined
} from '@ant-design/icons'


import './login.scss'
import logo from '../../assets/images/logo.png'

import CommonUtil from '../../util/CommonUtil'
import {authApi} from '../../api/auth/auth'
import MemoryUtil from '../../util/MemoryUtil'
import StoreUtil from '../../util/StoreUtil'

/**
 * 登录的路由组件
 */
export default class Login extends Component {
    loginRef = React.createRef()

    loginHandler = async (values) => {
        const result = CommonUtil.getData({data: await authApi.login(values)})
        MemoryUtil.user = result.userInfo
        StoreUtil.user.saveUser(MemoryUtil.user)
        message.success('登录成功')
        this.props.history.replace('/')
    }

    passwordValidator = (rule, value, callback) => {
        const length = value && value.length
        const pwdReg = /^[a-zA-Z0-9_]+$/
        if (!value) {
            callback('必须输入密码')
        } else if (length < 4) {
            callback('密码长度必须大于4为')
        } else if (length > 12) {
            callback('密码长度必须小于12为')
        } else if (!pwdReg.test(value)) {
            callback('密码必须是英文、数据或下划线组成')
        } else {
            callback()
        }
    }

    render() {
        // 如果以登录, 跳转到首页
        if(MemoryUtil.user && MemoryUtil.user.uid){
            return <Redirect to='/'/>
        }
        return (
            <div className='login'>
                <header className='login-header'>
                    <img src={logo} alt='logo'/>
                    <h1>React Admin</h1>
                </header>
                <section className='login-content'>
                    <h2>用户登录</h2>
                    <Form ref={this.loginRef} className='login-content-form' onFinish={this.loginHandler}>
                        <Form.Item
                            name='username'
                            initialValue='admin'
                            rules={[
                                {required: true, whitespace: true, message: '请输入用户名'},
                                {min: 4, type: 'string', message: '用户名长度必须大于4位'},
                                {max: 12, type: 'string', message: '用户名长度小于12位'},
                                {pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须是英文、数字或下划线组成'}
                            ]}
                        >
                            <Input prefix={<UserOutlined style={{color: 'rgba(0,0,0,.25)'}}/>} placeholder='用户名'/>
                        </Form.Item>
                        <Form.Item
                            name='password'
                            initialValue='admin'
                            rules={[
                                {required: true, message: '请输入密码'},
                                {validator: this.passwordValidator}
                            ]}
                        >
                            <Input prefix={<LockOutlined style={{color: 'rgba(0,0,0,.25)'}}/>} type='password'
                                   placeholder='密码'/>
                        </Form.Item>
                        <Form.Item>
                            <Button type='primary' htmlType='submit' className='login-content-form-button'>登录</Button>
                        </Form.Item>
                    </Form>
                </section>
            </div>
        )
    }
}
